<template>
  <div class="ranking-timeing__module" ref="container">
    <div class="ranking-header__wrapper">
      <h3>排行</h3>
      <itemTab :value="tabs" @change="tabChangeHandler" size="mini" v-if="tabShow" />
    </div>
    <ul class="ranking-body__wrapper">
      <simpleLoading v-if="rankingData.length==0" />
      <template v-else>
        <li :key="index" class="ranking__item" v-for="(ranking,index) in rankingData">
          <i class="ranking-num__item">{{index+1}}</i>
          <mivaLink class="ranking-info__item">
            <el-image :src="ranking.cover" class="ranking-cover__item" fit="cover" v-if="index===0" />
            <div class="ranking-detail__item">
              <p class="title__item">{{ranking.title}}</p>
              <p class="hit-num__item" v-if="index===0">浏览量：{{ranking.hit || 0 | toTransfromTenThousand }}</p>
            </div>
          </mivaLink>
        </li>
      </template>
    </ul>
    <mivaLink :to="to" class="ranking-footer__wrapper">
      莫多莫多
      <i class="el-icon-arrow-right" />
    </mivaLink>
  </div>
</template>

<script>
import itemTab from '@/components/mivaTab.vue';
import simpleLoading from '@/components/simpleLoading/index.vue';
import { getArchiveRankingAPI } from '@/api/archive';

export default {
    name: 'RankingTimeingModule',
    components: {
        itemTab,
        simpleLoading,
    },
    filters: {
        coverCut(str) {
            return `${str}?x-oss-process=image/resize,m_fill,w_124,h_70`;
        },
    },
    props: {
        type: Number,
        limit: Number,
        to: {
            type: String,
            default: '/',
        },
        tabShow: {
            type: [Boolean, String],
            default: false,
        },
        tabs: {
            type: Array,
            default() {
                return ['三日', '七日'];
            },
        },
    },
    data() {
        return {
            intersectionObserver: new IntersectionObserver(this.intersectionObserverCallback),
            rankingData: [],
        };
    },
    mounted() {
        this.intersectionObserver.observe(this.$refs.container);
    },
    destroyed() {
        this.intersectionObserver.disconnect();
    },
    methods: {
        intersectionObserverCallback([IntersectionObserverEntry]) {
            if (!IntersectionObserverEntry.isIntersecting) return;
            this.intersectionObserver.disconnect(); // 加载完成后自己销毁自己
            this.getArchiveRanking();
        },
        async getArchiveRanking() {
            const { data } = await getArchiveRankingAPI(this.type, this.limit);
            this.rankingData = data;
        },
        tabChangeHandler(index) {
            this.$emit('tabChange', index);
        },
    },
};
</script>

<style lang="less">
.ranking-timeing__module {
  width: 260px;
  padding-top: 30px;
  flex-shrink: 0;
  .ranking-header__wrapper {
    padding-bottom: 15px;
    font-size: 18px;
    display: flex;
    align-items: flex-end;
  }
  .ranking-body__wrapper {
    min-height: 200px;
    margin-top: 10px;
    position: relative;
    .ranking__item {
      position: relative;
      margin: 0 0 10px;
      padding: 5px 5px 5px 30px;
      overflow: hidden;
      transition: all 0.3s;
      background-color: @base_color;
      box-shadow: 5px -5px 0px @base_color_2;
      &:hover {
        background-color: @base_color_2;
        box-shadow: -5px 5px 0px @base_color;
      }
    }
    .ranking__item:nth-child(-n + 3) .ranking-num__item {
      background-color: @base_color_2;
    }
    .ranking__item:first-child {
      .title__item {
        width: 150px;
        height: 36px;
        margin-top: -3px;
      }
      .hit-num__item {
        display: block;
      }
    }
    .ranking-num__item {
      width: 18px;
      height: 18px;
      line-height: 18px;
      position: absolute;
      top: 5px;
      left: 5px;
      font-size: 12px;
      font-weight: bolder;
      text-align: center;
      border: 1px solid;
      border-radius: 4px;
      background-color: @base_color;
      transition: transform 0.3s;
      color: #fff;
    }
    .ranking-info__item {
      position: relative;
      display: flex;
    }
    .ranking-cover__item {
      width: 70px;
      height: 50px;
      margin-right: 5px;
      border-radius: 4px;
      overflow: hidden;
      flex-shrink: 0;
    }
    .title__item {
      height: 18px;
      line-height: 18px;
      overflow: hidden;
      color: #666;
    }
    .hit-num__item {
      display: none;
      height: 12px;
      line-height: 12px;
      margin-top: 5px;
      color: @global_text_color_grey;
      overflow: hidden;
    }
  }
  .ranking-footer__wrapper {
    height: 24px;
    line-height: 24px;
    display: block;
    border: 1px solid #e0e6ed;
    border-radius: 0 0 4px 4px;
    transition: all 0.3s;
    text-align: center;
    color: #666;
    background-color: @base_color;
    border-color: @base_color;
    &:hover {
      background-color: fade(@base_color_2, 60%);
      border-color: fade(@base_color_2, 60%);
    }
  }
}
</style>
